<template>
  <div class="dashboard-container">
    <el-card>
      <div style="text-align: center;font-size: 25px;font-weight: normal">
        我的信息
      </div>
    </el-card>
    <el-card>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="序号">
          <el-input v-model="form.id" :disabled="true" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username" :disabled="true" />
        </el-form-item>
        <el-form-item label="所属部门">
          <el-input v-model="form.departmentName" :disabled="true" />
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form.positionName" :disabled="true" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" :disabled="true" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" :disabled="true" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(form.id)">修改信息</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--用户信息编辑对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearForm">
      <el-form ref="userForm" :model="userForm">
        <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
          <el-input v-model="userForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
          <el-input v-model="userForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电子邮件" prop="email" :label-width="formLabelWidth">
          <el-input v-model="userForm.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="userForm.phone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import indexApi from '@/api/index'
import userApi from '@/api/userManage'
export default {
  name: 'Dashboard',
  data() {
    return {
      title: '修改个人信息',
      formLabelWidth: '130px',
      userForm: {},
      dialogFormVisible: false,
      form: {}
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    saveUser() {
      // 触发表单验证
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          // 提交请求给后台
          indexApi.updateUser(this.userForm).then(res => {
            // 成功提示，关闭对话框，刷新数据
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.dialogFormVisible = false
            this.getUserList()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clearForm() {
      this.userForm = {}
      this.$refs.userForm.clearValidate()
    },
    onSubmit(id) {
      console.log(id)
      console.log(typeof id)
      this.dialogFormVisible = true
      userApi.getUserById(id).then(res => {
        this.userForm = res.data
      })
    },
    getUserList() {
      indexApi.getUserList().then(res => {
        this.form = res.data
      })
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
